<template>
  <div>
    <!--    面包屑导航-->
    <el-breadcrumb style="padding-bottom:15px " separator="/">
      <el-breadcrumb-item :to="{ path: '/volunteerinfo' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>项目管理</el-breadcrumb-item>
      <el-breadcrumb-item>项目添加</el-breadcrumb-item>
    </el-breadcrumb>
    <!--    页面内容-->
    <el-card>
      <!--    搜索头部-->
      <el-row :gutter="40" style="padding-bottom: 15px">
        <el-col :span="8">
          <el-input placeholder="请输入内容" v-model="input3" class="input-with-select" @keyup.enter.native="Search"
                    clearable>
            <el-button slot="append" icon="el-icon-search" @click="Search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" size="mini" @click="addVolunteerinfo">添加用户</el-button>
        </el-col>
        <el-col :span="4" style="  position:absolute; left:90%;">
          <el-button type="primary" icon="el-icon-refresh-right" @click="getVolunteerinfoList"></el-button>
        </el-col>
      </el-row>
      <!--      渲染数据表格fr-->
      <el-table
          :data="VolunteerinfoList.data"
          border
          style="width: 100%">
        <el-table-column
            type="index"
            width="35">
        </el-table-column>
        <!--        <el-table-column-->
        <!--            prop="u_name"-->
        <!--            label="姓名"-->
        <!--            width="180">-->
        <!--        </el-table-column>-->
        <el-table-column
            prop="v_project"
            label="项目"
            width="300">
        </el-table-column>
        <el-table-column
            prop="v_place"
            label="地址"
            width="300">
        </el-table-column>
        <el-table-column
            prop="v_time"
            label="服务时间"
            width="300">
        </el-table-column>
        <el-table-column
            prop="v_name"
            label="联系人"
            width="300">
        </el-table-column>

        <el-table-column
            prop="v_cell"
            label="联系人电话"
            width="318">
        </el-table-column>
            <el-table-column
                prop="v_team"
                label="团体"
                width="318">
            </el-table-column>
                <el-table-column
                    prop="v_details"
                    label="详情"
                    width="318">
                </el-table-column>
              <!--        <el-table-column-->
              <!--            prop="user_id"-->
              <!--            label="身份证号">-->
              <!--        </el-table-column>-->
              <el-table-column
                  prop="v_id"
                  label="操作"
                  width="318">
                <div slot-scope="scope">
            <el-button type="primary" size="mini" @click="updateVolunteerinfo(scope.row)">查看/编辑</el-button>
            <el-button type="danger" size="mini" @click="deleteVolunteerinfo(scope.row)">删除</el-button>
          </div>
        </el-table-column>
      </el-table>
      <!--      分页控件-->
      <el-pagination
          @size-change="SizeChange"
          @current-change="CurrentChange"
          :current-page="page"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="VolunteerinfoList.count">
      </el-pagination>
      <!--      编辑用户dialog对话框-->
      <el-dialog
          title="编辑入校信息"
          :visible.sync="dialogUpdateVolunteerinfo"
          width="30%">
        <!--        内容区域-->
        <el-form :model="UpdateVolunteerinfo" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <!--          <el-form-item label="姓名">-->
          <!--            <el-input v-model="UpdateUserList.u_name" disabled></el-input>-->
          <!--          </el-form-item>-->
          <el-form-item label="项目" prop="v_project">
            <el-input v-model="UpdateVolunteerinfoList.v_project" ></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="v_place">
            <el-input v-model="UpdateVolunteerinfoList.v_place" disabled></el-input>
          </el-form-item>
          <el-form-item label="服务时间" prop="v_time">
            <el-input v-model="UpdateVolunteerinfoList.v_time"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="v_name">
            <el-input v-model="UpdateVolunteerinfoList.v_name"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="v_cell">
            <el-input v-model="UpdateVolunteerinfoList.v_cell"></el-input>
          </el-form-item>
          <el-form-item label="团体" prop="v_team">
            <el-input v-model="UpdateVolunteerinfoList.v_team"></el-input>
          </el-form-item>
          <el-form-item label="详情" prop="v_details">
            <el-input v-model="UpdateVolunteerinfoList.v_details"></el-input>
          </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogUpdateVolunteerinfo = false">取 消</el-button>
    <el-button type="primary" @click="updateVolunteerinfo1">保 存</el-button>
  </span>
      </el-dialog>
      <el-dialog
          title="更改入校信息"
          :visible.sync="dialogAddVolunteerinfo"
          width="30%">
        <el-form :model="AddVolunteerinfoList" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

          <el-form-item label="项目" prop="v_project">
            <el-input v-model="AddVolunteerinfoList.v_project" ></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="v_place">
            <el-input v-model="AddVolunteerinfoList.v_place" disabled></el-input>
          </el-form-item>
          <el-form-item label="服务时间" prop="v_time">
            <el-input v-model="AddVolunteerinfoList.v_time"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="v_name">
            <el-input v-model="AddVolunteerinfoList.v_name"></el-input>
          </el-form-item>
          <el-form-item label="联系人电话" prop="v_cell">
            <el-input v-model="AddVolunteerinfoList.v_cell"></el-input>
          </el-form-item>
          <el-form-item label="团体" prop="v_team">
            <el-input v-model="AddVolunteerinfoList.v_team"></el-input>
          </el-form-item>
          <el-form-item label="详情" prop="v_details">
            <el-input v-model="AddVolunteerinfoList.v_details"></el-input>
          </el-form-item>
          <el-button type="primary" @click="addVolunteerinfo1" class="a">添 加</el-button>
        </el-form>

      </el-dialog>
    </el-card>
  </div>
</template>


<script>
export default {
  name: "Volunteerinfo",
  //数据
  data() {
    return {
      input3: null,
      page: 1,
      limit: 10,
      VolunteerinfoList: [],
      UpdateVolunteerinfoList: {
        v_id: '',

      },
      AddVolunteerinfoList:{
        v_project: "",
        v_place: "",
        v_time: "",
        v_name: "",
        v_cell: "",
        v_team: "",
        v_details: "",
      },
      dialogAddVolunteerinfo: false,
      dialogUpdateVolunteerinfo: false,

    }
  },
  //方法
  methods: {
    //添加
    addVolunteerinfo(){
      this.dialogAddVolunteerinfo = !this.dialogAddVolunteerinfo
    },
    addEnrolled1(){
      this.dialogAddVolunteerinfo = !this.dialogAddVolunteerinfo
      this.$http.get("/VolunteerinfoController/addVolunteerinfo", {
        params: {
          v_id: this.AddVolunteerinfoList.v_id,
          v_project: this.AddVolunteerinfoList.v_project,
          v_place: this.AddVolunteerinfoList.v_place,
          v_time: this.AddVolunteerinfoList.v_time,
          v_name: this.AddVolunteerinfoList.v_name,
          v_cell: this.AddVolunteerinfoList.v_cell,
          v_team: this.AddVolunteerinfoList.v_team,
          v_details: this.AddVolunteerinfoList.v_details,
        }
      }).then((res) => {
        console.log(res)
        this.VolunteerinfoList = res.data;
        if (res.data.code === 1) {
          this.$message.success("添加成功")
          this.getVolunteerinfoList();
        } else this.$message.error("添加失败")
      })
    },
    //关键字搜索
    Search() {
      console.log(this.input3)
      this.$http.get("/VolunteerinfoController/selectWhereVolunteerinfo", {
        params: {
          page: 1,
          limit: 10,
          Keyword: this.input3,
        }
      }).then((res) => {
        console.log(res.data)
        this.VolunteerinfoList = res.data;
        if (res.data.code === 1) {
          this.$message.success("搜索成功")
        } else this.$message.error("搜索失败")
      })
    },
    //请求查看用户列表数据
    getVolunteerinfoList() {
      this.$http.get("/VolunteerinfoController/queryVolunteerinfo", {
        params: {
          page: this.page,
          limit: this.limit,
        }
      }).then((res) => {
        // console.log(res)
        this.VolunteerinfoList = res.data;
        if (res.data.code === 1) {
          // this.$message.success("请求成功")
        } else this.$message.error("请求失败")
      })
    },
    //编辑按钮事件
    updateVolunteerinfo(row) {
      this.dialogUpdateVolunteerinfo = !this.dialogUpdateVolunteerinfo
      this.UpdateVolunteerinfoList = row;
      console.log(this.UpdateVolunteerinfoList)
    },
    //确定编辑事件
    updateVolunteerinfo1() {
      this.dialogUpdateVolunteerinfo = !this.dialogUpdateVolunteerinfo
      this.$http.get("/VolunteerinfoController/updataVolunteerinfo", {
        params: {
          //user: this.UpdateUserList,
          v_id: this.AddVolunteerinfoList.v_id,
          v_project: this.AddVolunteerinfoList.v_project,
          v_place: this.AddVolunteerinfoList.v_place,
          v_time: this.AddVolunteerinfoList.v_time,
          v_name: this.AddVolunteerinfoList.v_name,
          v_cell: this.AddVolunteerinfoList.v_cell,
          v_team: this.AddVolunteerinfoList.v_team,
          v_details: this.AddVolunteerinfoList.v_details,
        }
      }).then((res) => {
        console.log(res)
        this.VolunteerinfoList = res.data;
        if (res.data.code === 1) {
          this.$message.success("保存成功")
          this.getVolunteerinfoList();
        } else this.$message.error("保存失败")
      })
    },
    //删除按钮事件
    deleteVolunteerinfo(row) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.get("/VolunteerinfoController/deleteVolunteerinfo", {
          params: {
            v_id: row.v_id,
          }
        }).then((res) => {
          console.log(res)
          if (res.data.code === 1) {
            this.$message.success("删除成功")
            this.getVolunteerinfoList();
          } else this.$message.error("删除失败")
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //每页条数发生改变时触发
    SizeChange(limit) {
      this.limit = limit;
      this.getVolunteerinfoList();
    },
    //页码发生改变时触发
    CurrentChange(page) {
      this.page = page;
      this.getVolunteerinfoList();
    },
  },
  //  钩子函数
  created() {
    this.getVolunteerinfoList();
  }
}
</script>

<style scoped>
.a{
  margin-left: 360px;
  margin-top: 20px;
}
</style>









